<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>值班管理</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/left::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body" id="app">
        <template>

            <div>
                <el-calendar style="height:500px" v-model="value">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div @click="isSelected(data,dealMyDate(data.day))"
                                style="width:100%;height:100%;"
                                :class="dealMyDate(data.day)?'isSelectedclass':''">
                              <span :class="data.isSelected ? 'is-selected' : ''">
                                  {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                              </span><br>
                            <span class="is-selected">{{dealMyDate(data.day)}}</span>
                         </div>
                    </template>
                </el-calendar>
            </div>
            <el-dialog
                    title="添加值班人员"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :modal-append-to-body='false'>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="值班时间">
                        <el-input v-model="form.date" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="值班人员">
                        <el-select v-model="form.staffs" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in staff"
                                    :key="item.staName"
                                    :label="item.staName"
                                    :value="item.staName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit()">确 定</el-button>
                </span>
            </el-dialog>
        </template>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>

<script type="text/babel">
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
            el:"#app",
            data:{
                value: new Date(),
                dialogVisible: false,
                staff:[],
                form:{
                      date:"",
                      staffs:[]
                },
                data:[]
            },
            created: function() {
                this.$nextTick(() => {
                        // 点击前一个月
                        let prevBtn = document.querySelector(
                            ".el-calendar__button-group .el-button-group>button:nth-child(1)"
                        );
                    prevBtn.addEventListener("click", e => {
                        this.prevBtnmonth(this.value);
                });
                    //点击下一个月
                    let nextBtn = document.querySelector(
                        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
                    );
                    nextBtn.addEventListener("click", () => {
                        this.nextBtnmonth(this.value);
                });
                    //点击今天
                    let todayBtn = document.querySelector(
                        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
                    );
                    todayBtn.addEventListener("click", () => {
                        this.todayBtnmonth(this.value);
                });
                });
            },
            mounted(){
                this.getExtra();
                this.getStaff();
            },
            methods: {
                prevBtnmonth(ins) {
                    console.log("上个月按钮事件");
                    console.log(ins);
                },
                nextBtnmonth(ins) {
                    console.log("下个月按钮事件");
                    console.log(ins);
                },
                todayBtnmonth(ins) {
                    console.log("今天按钮事件");
                    console.log(ins);
                },
                // 是否选中日期
                isSelected(ins, ins2) {
                    this.form = {};
                    let now = new Date();
                    let year = now.getFullYear();
                    let month = now.getMonth()+1;
                    let day = now.getDate();
                    day =  day<10 ? "0"+day : day;
                    if(month<10){
                        month = "0"+month;
                    }
                    let nowDay = year+"-"+month+"-"+day;
                    if(ins2){
                        //如果有值就是编辑
                    }else {
                        if(ins.day>=nowDay){
                            this.form.date = ins.day;
                            this.dialogVisible = true;
                        }
                    }
                },
                dealMyDate(day) {
                    let len = this.data.length;
                    let res = "";
                    for (let i = 0; i < len; i++) {
                        if (this.data[i].extraTime == day) {
                            //遍历extraStaffList
                            for (let j = 0; j < this.data[i].extraStaffList.length; j++) {
                                res = res+'\n'+this.data[i].extraStaffList[j].staName;
                            }
                        }
                    }
                    return res;
                },

                getExtra:function () {
                    var _this = this;
                    axios.get("http://localhost:8443/extra_index2").then(function (response) {
                        _this.data = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },
                getStaff:function () {
                    var _this = this;
                    axios.get("http://localhost:8443/get_all_staff").then(function (response) {
                        _this.staff = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },
                submit:function () {
                    if(this.form.staffs.length>0){
                        this.dialogVisible = false;
                        let date = this.form.date;
                        let staffs = this.form.staffs;
                        let params = new URLSearchParams();
                        params.append('date', date);
                        params.append('staffs', staffs);
                        //值班表添加数据
                        axios.post("http://localhost:8443/insert_extra_work",params).then(function (response) {
                            this.getExtra();
                            this.getStaff();
                        },function (err) {
                            console.log(err);
                        })
                    }else{
                        alert("请选择值班人员！");
                    }

                }
        }
    })
</script>
</body>
</html>